<template>
    <div class="owner">
        <div class="main-tile">业主管理-查询</div>
        <div class="main-content">
            <span>姓名：</span>
            <Input v-model="userName" placeholder="" class="input-short"/>
            <span>手机号码：</span>
            <Input v-model="userPhone" placeholder="" class="input-long"/>
            <Button type="primary" @click="getOwnerData(userName,userPhone)">查询</Button>
            <Table class="main-table" border height="315" :columns="ownerColumns" :data="ownerCurrnData">
                <template slot-scope="{ row, index }" slot="action">
                    <Button type="primary" class="table-btn" size="small" @click="userChange(row,index)">修改</Button>
                    <Button type="primary" class="table-btn" size="small" @click="accessRecord(row,index)">出入记录</Button>
                </template>
            </Table>
            <Page :total="ownerData.length" @on-change="changePage" :page-size="3" show-total class="text-center"/>
        </div>
    </div>
</template>
<script type="text/ecmascript-6">
    export default {
        data() {
            return {
                userName:'',
                userPhone:'',
                ownerColumns:[
                    {
                        title: '姓名',
                        key: 'personName',
                        align: 'center',
                        width:100,
                    },
                    {
                        title: '手机号码',
                        key: 'personPhone',
                        align: 'center',
                    },
                    {
                        title: '性别',
                        key: 'sex',
                        align: 'center',
                        width:70,
                    },
                    {
                        title: '小区名称',
                        key: 'address',
                        align: 'center',
                    },
                    {
                        title: '常住地址',
                        key: 'domicile',
                        align: 'center',
                        width:100,
                    },
                    {
                        title: '户口所在地',
                        key: 'nativePlace',
                        align: 'center',
                        width:120,
                    },
                    {
                        title: '最近回沪时间',
                        key: 'backTime',
                        align: 'center',

                    },
                    {
                        title: '回沪方式',
                        key: 'traffic',
                        align: 'center',
                        width:100,
                    },
                    {
                        title: '车次',
                        key: 'trainNumber',
                        align: 'center',
                        width:100,
                    },
                    {
                        title: '操作',
                        slot:'action',
                        align: 'center',
                    },
                ],
                ownerData:[],
                ownerCurrnData:[],
            }
        },
        mounted(){
//            this.getOwnerData('','')
        },
        methods: {
            //修改
            userChange(item,index){
//                console.log(item,index)
            },
            //出入记录
            accessRecord(item,index){
//                console.log(item,index)
                this.$emit('toPage',{item:item,index:3})
            },
            //获取业主数据
            getOwnerData(name,num){
                this.$axios.get(this.$api.queryPersonInfo,
                    {
                        params:{
                            "personName": name,
                            "personPhone": num,
                        }
                    })
                    .then(success=>{
                        this.ownerData=success.data.data
                        this.changePage(1)
                    })
                    .catch(error=>{
                        console.log(error.data)
                    })
            },
            //获取当前页审核数据
            getCurrnExamineData(data,pageNum){
                return this.$utils.sliceArray(data,3)[pageNum-1]
            },
            //改变页数
            changePage(num){
                this.ownerCurrnData=this.getCurrnExamineData(this.ownerData,num)
            },

        }
    }
</script>
<style scoped lang="scss">
    .owner{
        .input-short{
            width: 150px;
        }
        .input-long{
            width: 300px;
        }
        .main-content{
            padding: 0 18px;
        }
        .main-table{
            margin: 10px 0;
        }
        .table-btn{
            margin: 3px;
        }
    }
</style>